<template>
  <div>
    <div>
      <el-dialog
        class="nyDialog"
        :visible.sync="is_dialog_show"
        width="42%"
        :close-on-click-modal="false"
        :before-close="
          () => {
            this.close();
          }
        "
      >
        <div
          class="overflow-hidden w-full h-full flex flex-col items-center"
          style="border-radius: 4px"
        >
          <div
            class="w-full h-w48 flex items-center px-w20 justify-between bg-caux text-white"
          >
            <div class="text-f14">
              {{ m_data.id ? "编辑Banner" : "添加Banner" }}
            </div>
            <i
              class="el-icon-circle-close cursor-pointer"
              @click.stop="close()"
            ></i>
          </div>
          <div class="w-full flex justify-center">
            <div class="flex flex-col w-w8/12">
              <div
                class="flex flex-row items-start w-full text-c3 text-f16 mt-w30"
              >
                <div class="w-w1/4 text-right pr-w20 h-w50 leading-w50">
                  图片
                </div>
                <div class="flex flex-col">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :show-file-list="false"
                    :on-change="action_select_file"
                    :auto-upload="false"
                    accept="image/png, image/jpeg"
                  >
                    <img
                      v-if="m_data.imageUrl"
                      :src="m_data.imageUrl"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div class="mt-w5 text-f15 text-c6">
                    图片尺寸：828px*438px
                  </div>
                </div>
              </div>
              <div
                class="flex flex-row items-center w-full h-w50 leading-w50 text-c3 text-f16 mt-w30"
              >
                <div class="w-w1/4 text-right pr-w20">类型</div>
                <el-select
                  class="w-w3/4"
                  v-model="m_data.type"
                  placeholder="请选择"
                  @change="m_data.content = ''"
                >
                  <el-option label="图片" :value="1"> </el-option>
                  <el-option label="文章" :value="2"> </el-option>
                  <el-option label="视频" :value="3"> </el-option>
                  <el-option label="量表" :value="4"> </el-option>
                  <el-option label="问卷" :value="5"> </el-option>
                  <el-option label="问卷+量表" :value="6"> </el-option>
                </el-select>
              </div>

              <div
                class="flex flex-row items-center w-full h-w50 leading-w50 text-c3 text-f16 mt-w30"
                v-if="m_data.type != 1"
              >
                <div class="w-w1/4 text-right pr-w20">内容</div>
                <el-select
                  class="w-w3/4"
                  v-model="m_data.content"
                  placeholder="请选择"
                  v-if="m_data.type == 2"
                >
                  <el-option
                    v-for="item in s_article.list_article"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select
                  class="w-w3/4"
                  v-model="m_data.content"
                  placeholder="请选择"
                  v-if="m_data.type == 3"
                >
                  <el-option
                    v-for="item in s_video.list_video"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select
                  class="w-w3/4"
                  v-model="m_data.content"
                  placeholder="请选择"
                  v-if="m_data.type == 4"
                >
                  <el-option
                    v-for="item in s_assess.list_assess"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select
                  class="w-w3/4"
                  v-model="m_data.content"
                  placeholder="请选择"
                  v-if="m_data.type == 5"
                >
                  <el-option
                    v-for="item in s_inves.list_inv"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-select
                  class="w-w3/4"
                  v-model="m_data.content"
                  placeholder="请选择"
                  v-if="m_data.type == 6"
                >
                  <el-option
                    v-for="item in s_inves.list_inv_with_assess"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>

              <div
                class="flex flex-row items-center w-full h-w50 leading-w50 text-c3 text-f16 mt-w30"
              >
                <div class="w-w1/4 text-right pr-w20">权限</div>
                <el-select
                  class="w-w3/4"
                  v-model="m_data.auth"
                  placeholder="请选择"
                >
                  <el-option label="全部可见" :value="0"> </el-option>
                  <el-option label="部分可见" :value="1"> </el-option>
                  <el-option label="部分人可见" :value="2"> </el-option>
                </el-select>
              </div>
              <!--公司多选-->
              <div
                class="flex flex-row items-center w-full min-h-w50 leading-w50 text-c3 text-f16 mt-w30"
                v-if="m_data.auth == 1"
              >
                <div class="w-w1/4 text-right pr-w20">公司</div>
                <el-select
                  class="w-w3/4"
                  v-model="list_company"
                  placeholder="请选择"
                  multiple
                >
                  <el-option
                    v-for="item in s_report.list_company"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id + ''"
                  >
                  </el-option>
                </el-select>
              </div>

              <!-- 公司单选 -->
              <div
                class="flex flex-row items-center w-full min-h-w50 leading-w50 text-c3 text-f16 mt-w30"
                v-if="m_data.auth == 2"
              >
                <div class="w-w1/4 text-right pr-w20">公司</div>
                <el-select
                  class="w-w3/4"
                  v-model="company"
                  placeholder="请选择"
                  @change="action_select_company"
                >
                  <el-option
                    v-for="item in s_report.list_company"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id + ''"
                  >
                  </el-option>
                </el-select>
              </div>

              <div
                class="flex flex-row items-center w-full min-h-w50 leading-w50 text-c3 text-f16 mt-w30"
                v-if="m_data.auth == 2"
              >
                <div class="w-w1/4 text-right pr-w20">部门</div>
                <el-select
                  class="w-w3/4"
                  v-model="departments"
                  placeholder="请选择"
                  multiple
                  @change="action_select_department"
                >
                  <el-option
                    v-for="item in s_staff.list_department_by_company"
                    :value="item"
                    :label="item"
                  >
                  </el-option>
                </el-select>
              </div>

              <div
                class="flex flex-row items-center w-full min-h-w50 leading-w50 text-c3 text-f16 mt-w30"
                v-if="m_data.auth == 2"
              >
                <div class="w-w1/4 text-right pr-w20">人员</div>
                <el-select
                  class="w-w3/4"
                  v-model="staffs"
                  placeholder="请选择"
                  multiple
                  collapse-tags
                  @change="e => changeSelect(e)"
                >
                  <div class="checkboxWrapper">
                    <el-checkbox v-model="checked" @change.native="checkChange">
                      全选
                    </el-checkbox>
                  </div>
                  <el-option
                    v-for="item in s_staff.list_staff"
                    :value="item.id"
                    :label="item.name"
                    :key="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>

          <div class="w-full flex flex-row justify-center mt-w30 mb-w30">
            <el-button class="w-w1/5 mr-w20" @click="close">取消</el-button>
            <el-button
              class="w-w1/5 bg-cmain_hover"
              type="primary"
              @click="actionSubmit"
              >确定
            </el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts">
import uploadFile from "@/utils/DZUploadFile";
import nyMessageToast from "@/utils/NYMessageToast";
import DZModelBanner from "@/views/banner管理/model/DZModelBanner";
import DZServiceReport from "@/views/报告管理/service/DZServiceReport";
import DZServiceArticle from "@/views/文章管理/service/DZServiceArticle";
import DZServiceAssess from "@/views/测评管理/service/DZServiceAssess";
import DZServiceVideo from "@/views/视频管理/service/DZServiceVideo";
import DZServiceInves from "@/views/问卷管理/service/DZServiceInves";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import DZServiceStaff from "@/views/员工管理/service/DZServiceStaff";

@Component
export default class UiDialogAddBanner extends Vue {
  @Prop() is_showDialog;

  @Prop() data;

  checked = false

  is_dialog_show = false;

  m_data = new DZModelBanner();

  s_article = new DZServiceArticle();

  s_video = new DZServiceVideo();

  s_assess = new DZServiceAssess();

  s_inves = new DZServiceInves();

  s_report = new DZServiceReport();

  s_staff = new DZServiceStaff();

  list_company = [];

  //单选中的公司
  company = "";
  //选中的部门
  departments = "";
  //选中的人员
  staffs = [];

  list_staff = [];

  checkChange(e){
    let options = JSON.parse(JSON.stringify(this.s_staff.list_staff))
    let resValues = options.map(item => item.id);
    if (!this.checked) {
      this.staffs = [];
    } else {
      let res = [...resValues];
      this.staffs = res;
    }
  }

  changeSelect(val){
    let options = JSON.parse(JSON.stringify(this.s_staff.list_staff))
    let resValues = options.map(item => item.id);
    if (val.length === resValues.length) {
      this.checked = true;
    } else {
      this.checked = false;
    }
    this.staffs = val;
  }

  created() {
    this.s_article.net_list_article_all();
    this.s_video.net_list_video_all();
    this.s_assess.net_list_assess_dic();
    this.s_inves.net_list_inv_all_without_assess();
    this.s_inves.net_list_inv_all_with_assess();
    this.s_report.net_list_all_company();
  }

  mounted() {}

  beforeDestroy() {}

  close() {
    this.$emit("nydialog_closed", "");
    this.initDialog();
  }

  initDialog() {
    this.m_data = new DZModelBanner();
    this.list_company = [];
    this.staffs = [];
    this.is_dialog_show = false;
  }

  @Watch("is_showDialog")
  watchShowDialog(value: any, oldValue: string) {
    this.is_dialog_show = value;
  }

  @Watch("data")
  watchData(value: any, oldValue: string) {
    if (value) {
      this.m_data = value;
      if (this.m_data.companyList != "") {
        this.list_company = this.m_data.companyList.split(",");
      }
      if (this.m_data.auth == 2) {
        if (this.m_data.staffList != "") {
          this.company = this.m_data.companyList;
          this.s_staff.net_staff_by_ids(this.m_data.staffList.split(","));
          this.staffs = this.m_data.staffList.split(",");
          let arr = [];
          arr.push(this.company);
          this.s_staff.net_department_all_company(arr);
        }
      }
    } else {
      this.m_data = new DZModelBanner();
      this.list_company = [];
    }
  }

  actionSubmit() {
    if (this.list_company.length > 0) {
      this.m_data.companyList = this.list_company.join(",");
    }
    if (this.staffs.length > 0) {
      this.m_data.staffList = this.staffs.join(",");
    }
    if (this.m_data.auth == 2) {
      this.m_data.companyList = this.company;
    }
    console.log(this.m_data);
    this.$emit("nydialog_submit", this.m_data);
    this.close();
  }

  action_select_file(file) {
    if (file.status == "ready") {
      this.m_data.imageUrl = URL.createObjectURL(file.raw);
      uploadFile.uploadImage(
        file.raw,
        (res) => {},
        (res) => {
          nyMessageToast.success("图片上传成功");
          this.m_data.image = res + "";
        },
        (res) => {
          nyMessageToast.error("图片上传失败");
          this.m_data.imageUrl = "";
        }
      );
    }
  }

  action_select_company() {
    this.departments = "";
    this.staffs = [];
    let arr = [];
    if (this.m_data.auth == 2) {
      if (this.company != "") arr.push(this.company);
      this.s_staff.net_department_all_company(arr);
    }
  }

  action_select_department() {
    this.staffs = [];
    if (this.departments.length != 0) {
      this.s_staff.net_staff_company_department(this.company, this.departments);
    }
  }

  select_all_staff(){
    let list = JSON.parse(JSON.stringify(this.s_staff.list_staff))
    let arr = []
    list.forEach(obj =>{
       arr.push(obj.id)
    })
    this.staffs = arr
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
  border-radius: 4px !important;
  border: none;
}

/deep/.el-dialog__body {
  text-align: left;
  min-height: 22vw;
  padding: 0px;
}

/deep/ .dialog-tips {
  margin-top: 0 !important;
}

/deep/ .el-dialog__footer {
  text-align: right;
}

/deep/.el-dialog__header {
  height: 0px;
  padding: 0;
}

/deep/ .el-icon-close:before {
  content: "";
}

.nyDialog {
  background: none;
}

/deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/ .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 143px;
  height: 97px;
  line-height: 97px;
  text-align: center;
}

/deep/ .avatar {
  width: 143px;
  height: 97px;
  display: block;
}

.checkboxWrapper {
  padding: 8px 20px;
  border-bottom: 1px solid #ccc;
}
</style>
